<template>
  <!-- 预览页 -->
  <div class="previewWrap">
    <div class="previewStatus" v-show="tips">
      <p>您当前处于预览状态</p>
      <i class="el-icon-close" @click="closeEvent"></i>
    </div>
    <div class="navigation">
      <topBar class="topBarStyle"></topBar>
      <topMenu class="topMenuStyle"></topMenu>
    </div>
    <div class="el-home-contain">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-card class="box-card" style="margin-bottom: 10px;" body-style="padding:0;">
            <div class="el-tiles">
              <div class="el-avatar"><img src="@/assets/img/avatar.png"><br /><span class="size-15">宋茜</span><br>共享业务服务部</div>
              <div class="el-tile">
                <dt class="el-tile-title">未读邮件<br><span class="size-40">26</span></dt>
                <dd class="el-tile-icon"><img src="@/assets/img/tile-icon1.png" style="width: 60px;"></dd>
              </div>
              <div class="el-tile" style="background-color: #FDEEE2;">
                <dt class="el-tile-title">待办文件<br><span class="size-40">336</span></dt>
                <dd class="el-tile-icon"><img src="@/assets/img/tile-icon2.png" style="width: 60px;"></dd>
              </div>
              <div class="el-tile" style="background-color: #DDEFFF;">
                <dt class="el-tile-title">待阅文件<br><span class="size-40">78</span></dt>
                <dd class="el-tile-icon"><img src="@/assets/img/tile-icon3.png" style="width: 60px;"></dd>
              </div>
            </div>
          </el-card>
          <el-card class="box-card el-card_tabs color-000">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"></i> 统一审批中心</span>
              <el-button type="text" style="float: right;">更多</el-button>
            </div>
            <el-tabs>
              <el-tab-pane :label="'待办(1)'" style="height: 275px;overflow: hidden;">
                <ul class="el-news-list">
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">{{"list.taskTitle"}}</p>
                      提交人：{{"系统管理员"}} <span class="el-space"></span> 审批人：{{"王刚"}}
                    </dt>
                    <dd class="el-news-date">{{"list.startDate"}}</dd>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="已办" style="height: 275px;overflow: hidden;">
                <ul class="el-news-list">
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">{{"list.taskTitle"}}</p>
                      提交人：{{"系统管理员"}} <span class="el-space"></span> 审批人：{{"王刚"}}
                    </dt>
                    <dd class="el-news-date">{{"list.startDate"}}</dd>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" style="margin-bottom: 10px;" body-style="overflow:hidden;padding:0;">
            <div class="el-schedule">
              <h1 class="el-schedule-title"><span class="size-20">August</span>&nbsp;&nbsp;2019</h1>
              <ul class="el-schedule-cont">
                <li class="el-schedule-date">一<br>5</li>
                <li class="el-schedule-date">二<br>6</li>
                <li class="el-schedule-date">三<br>7</li>
                <li class="el-schedule-date">四<br>8</li>
                <li class="el-schedule-date">五<br>9</li>
                <li class="el-schedule-date">六<br>10</li>
                <li class="el-schedule-date">日<br>11</li>
              </ul>
            </div>
            <ul class="el-news-list">
              <li class="el-news-li el-notice-li" style="padding-left:5px ;">
                <i class="el-icon-circle-plus el-list-icon"></i>添加我的日程
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>微服务技术中台汇报演示
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>党建会议交流学习
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>“安全责任在我心”主题学习
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>下班打卡，填写工时
              </li>
            </ul>
          </el-card>
          <el-card class="box-card el-card-noborder color-000" body-style="overflow:hidden;padding:0;height:160px;">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"> </i> 常用功能</span>
            </div>
            <div class="el-shortcut">
              <ul class="el-shortcut-ul">
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut1.png"><br>
                  请假申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut2.png"><br>
                  报销</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut3.png"><br>
                  备用金</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut4.png"><br>
                  用印申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut5.png"><br>
                  转正</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut6.png"><br>
                  出差申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut7.png"><br>
                  离职</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut8.png"><br>
                  招聘</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut9.png"><br>
                  加班申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut1.png"><br>
                  请假申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut2.png"><br>
                  报销</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut3.png"><br>
                  备用金</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut4.png"><br>
                  用印申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut5.png"><br>
                  转正</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut6.png"><br>
                  出差申请</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut7.png"><br>
                  离职</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut8.png"><br>
                  招聘</li>
                <li class="el-shortcut-li"><img src="@/assets/img/shortcut9.png"><br>
                  加班申请</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px;">
        <el-col :span="16">
          <el-card class="box-card el-card_tabs color-000">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"></i> 任务</span>
            </div>
            <el-tabs>
              <el-tab-pane label="进行中(11)" style="height: 275px;overflow: hidden;">
                <ul class="el-news-list">
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">星宇友空间方案沟通</p>
                      发起人：张驰 <span class="el-space"></span> 督办人：王鹏
                    </dt>
                    <dd class="el-news-date">2019-07-10</dd>
                  </li>
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">微服务技术中台演示环境数据维护</p>
                      发起人：张驰 <span class="el-space"></span> 督办人：王鹏
                    </dt>
                    <dd class="el-news-date">2019-07-10</dd>
                  </li>
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">业务综合管理系统原型确认</p>
                      发起人：张驰 <span class="el-space"></span> 督办人：王鹏
                    </dt>
                    <dd class="el-news-date">2019-07-10</dd>
                  </li>

                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">“三重一大”数据上报</p>
                      发起人：张驰 <span class="el-space"></span> 督办人：王鹏
                    </dt>
                    <dd class="el-news-date">2019-07-10</dd>
                  </li>
                  <li class="el-news-li">
                    <dt class="el-news-title">
                      <p class="size-15">信息化考核需求分析与评估</p>
                      发起人：张驰 <span class="el-space"></span> 督办人：王鹏
                    </dt>
                    <dd class="el-news-date">2019-07-10</dd>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="已延期" style="height: 300px;overflow: hidden;">
                <p style="text-align: center;">暂无数据...</p>
              </el-tab-pane>
              <el-tab-pane label="未开始" style="height: 300px;overflow: hidden;">
                <p style="text-align: center;">暂无数据...</p>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card color-000" body-style="height:315px;overflow:hidden;padding:0;">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"> </i> 公告</span>
            </div>
            <ul class="el-news-list">
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <span class="el-list-dot active"></span>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
              <li class="el-news-li el-notice-li">
                <i class="el-list-dot"></i>陈霞霞的报销申请
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px;">
        <el-col :span="16">
          <el-card class="box-card el-card_noborder color-000" body-style="height:300px;overflow:hidden;padding:10px 0;">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"></i> 集团新闻</span>
            </div>
            <ul class="el-news-list" style="padding:0 10px">
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
              <li class="el-news-li el-news-li-noborder">
                <dt class="el-news-title">
                  【集团新闻】中国煤炭新闻网：中国大屯公司姚桥煤矿四大举措激发企业党建活力
                </dt>
                <dd class="el-news-date">2019-07-10</dd>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card el-card_tabs color-000">
            <div slot="header" class="clearfix">
              <span><i class="el-title-adorn"></i> 文库</span>
            </div>
            <el-tabs>
              <el-tab-pane label="企业文档" style="height: 270px;overflow: hidden;">
                <ul class="el-news-list">
                  <li class="el-news-li el-notice-li">
                    <i class="el-list-dot"></i>陈霞霞的报销申请
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="内部文档" style="height: 270px;overflow: hidden;"></el-tab-pane>
              <el-tab-pane label="项目文档" style="height: 270px;overflow: hidden;"></el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import topBar from '../../layout/topBar' // 引入顶部logo
import topMenu from '../../layout/topMenu' // 引入顶部菜单
import { Tabs, TabPane } from 'element-ui'
export default {
  components: {
    topBar, // 顶部logo
    topMenu, // 顶部菜单
    'el-tabs': Tabs,
    'el-tab-pane': TabPane
  },
  data () {
    return {
      tips: true // 是否显示提示文字 默认展示
    }
  },
  created() {
    this.tips = true
  },
  methods: {
    closeEvent () {
      this.tips = false
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
@import './preview.scss';
</style>